<%- include('nav') %>
  <div id="app" v-cloak>
    <!-- 机器人头像 -->

    <div class="stats shadow mt2" style="width: 100%">
      <div class="stat">
        <div class="stat-figure text-info">
          <div class="avatar online" v-if="isLogin">
            <!-- <div class="w-16 h-16 p-1 mask mask-squircle">
              <img v-bind:src="bot.avatar" style="height: 40px; width: 40px" class="mask mask-squircle" />
            </div> -->
          </div>
          <div v-else>
            <button class="btn btn-small" @click="showLogin=true">扫码登录</button>
          </div>
        </div>
        <div class="stat-title">机器人信息</div>
        <div class="stat-value" style="font-size: 18px">

          <div v-if="isLogin">{{bot.name}} <span @click="logoutBot" class="bold blue">登出</span></div>
          <div v-else>未登录</div>
        </div>
        <div class="stat-desc text-info">id: {{bot.id}}</div>
        <div class="stat-desc text-info">token: <%=process.env.WECHATY_TOEKN%>
        </div>
      </div>

      <div class="stat">
        <div class="stat-figure text-primary"></div>
        <div class="stat-title">今日收入</div>
        <div class="stat-value text-primary">{{stat.todayCharge?stat.todayCharge.sum/100 : '-'}}元</div>
        <div class="stat-desc">
          昨日收入{{stat.yestodayCharge?stat.yestodayCharge.sum/100 : '-'}}元 ,
          总收入{{stat.totalCharge?stat.totalCharge.sum/100 : '-'}}元
        </div>
      </div>
      <div class="stat">
        <div class="stat-figure text-info"></div>
        <div class="stat-title">红包充值</div>
        <div class="stat-value text-info">{{stat.todayRedCharge?stat.todayRedCharge.sum/100 : '-'}}元</div>
        <div class="stat-desc">
          昨日充值{{stat.yestodayRedCharge?stat.yestodayRedCharge.sum/100 : '-'}}元,
          总充值{{stat.redCharge?stat.redCharge.sum/100 : '-'}}元
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-2">
      <div class="mt1 p1 bg-white rounded2">
        <div class="font-16 bold">服务器信息</div>
        <div class="p1 m1 flex items-start">
          <div class="mr2">
            <div>白名单ip: <%=(typeof(ip) !=='undefined' )? ip:'' %>
            </div>
            <div>白名单ip 用于设置企业付款零钱的api白名单.公众号开启白名单时候用</div>
            <div>启动时间: <%=typeof(startTime)!=='undefined'?startTime:''%>
            </div>

            <div class="btn btn-sm" @click="reboot">重启</div>
            <!-- <div class="btn btn-sm mr-2 btn-primary" @click="reboot(true)">重启(登录修复)</div> -->

          </div>
          <div>
            <div>更细日志: </div>
            <div>5-31 关键字入群</div>
            <div>5-05 自定义页脚</div>
            <div>4-24 群聊自动回复</div>
            <div>4-19 修复累计签到</div>
            <div>4-08 排行榜</div>
            <div>4-08 连续签到</div>
            <div>4-01 到店领取,核销</div>
            <div>4-01 商城自定义banner</div>
          </div>
        </div>
      </div>

      <!-- <div class="mt1 p1 bg-white rounded2">
        <div class="font-16 bold">关键字入群</div>
        <div class="font-13">
          设置格式(空格隔开,一行以规则): 关键字 群id <br /> 群id可以在<a class="bold underline" href="/admin/rooms">群管理</a>查看, 配置例子如下

          <p class="bg-silver p1">
            入群1 R:10696050590038171<br />
            入群2 R:10696050590038172
          </p>
        </div>
        <div class="p1 m1">
          <textarea style="width:100%" class="  textarea textarea-bordered" rows="5" placeholder=""
            v-model="main.keyrooms"></textarea>
        </div>
        <button class="btn btn-primary btn-small" @click="saveMain">保存</button>
      </div> -->


      <div class=" mt1 p1 bg-white rounded2">
        <div class="font-16 bold">最近订单</div>
        <table class="table col-12 table-zebra table-compact">
          <thead>
            <tr>
              <th>客户[邀请人]</th>
              <th>付费类型</th>
              <th>日期</th>
              <th>价格</th>
            </tr>
          </thead>
          <tr v-for="order, i in orders" v-if="i<10">
            <td>
              <a target="_blank" v-bind:href="'/admin/manage?clientid='+order.client._id">
                <div class="flex items-center" v-if="order.user">
                  <!-- <img class="circle" v-bind:src="order.user.headimgurl" style="width: 20px" /> -->
                  <div class="pl1 badge badge-success badge-sm">{{order.user.nickname}}</div>
                </div>
                <div v-else class="badge badge-sm badge-info">{{order.client.contactid}}</div>
              </a>
            </td>
            <td>
              <span v-if="order.room" class="m1 badge badge-info badge-sm">群续费 {{order.room.topic}}
                {{order.room.memberIdList.length}}人</span>
              <span v-else class="m1 badge badge-sm badge-warning">红包充值</span>
            </td>
            <td>{{order.datetime}}</td>
            <td>
              <div class="red bold">{{order.total_fee?order.total_fee/100:'0'}}元</div>
            </td>
          </tr>
        </table>
        <div class="p1 m1 center">
          <a href="/admin/orders">查看所有</a>
        </div>
      </div>


    </div>

    <!-- <div class="m2">
				<div class="center " v-if="syncing">同步中, 请稍等</div>
				<div v-else @click="sync" class="weui-btn weui-btn_primary">
					手动同步通讯录
				</div>
			</div> -->

    <!-- 登陆弹框 -->

    <div v-show="showLogin">
      <div class="weui-mask" @click="showLogin=false"></div>
      <div class="weui-half-screen-dialog">
        <!-- <i class="weui-icon-warn weui-icon_msg"></i> -->
        <div class="weui-half-screen-dialog__hd">
          <div class="weui-half-screen-dialog__hd__side">
            <button class="weui-icon-btn" @click="showLogin=false">
              返回
              <i class="weui-icon-back-arrow-thin"></i>
            </button>
          </div>
          <div class="weui-half-screen-dialog__hd__main">请使用微信扫码登陆机器</div>
        </div>

        <div class="weui-half-screen-dialog__bd">
          <div class="center">
            <img v-if="!showQr" src="/img/loading.webp" style="width: 320px; height: 320px" />

            <canvas v-show="showQr" id="qr-canvas" class="mx-auto" width="320px;" height="320px;"></canvas>
            <p class="weui-msg__tips">机器人登陆后，请勿使用电脑登陆。否则机器人被迫下线，功能无法正常使用。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="/js/qrious.min.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          bot: {},
          stat: {},
          orders: [],
          showQr: false,
          showLogin: false,

          isLogin: false,
          interval: false,
          syncing: false,
          isLoading: false,
          loading: false
        };
      },
      created: function () {
        this.loading = weui.loading();
        this.interval = setInterval(this.checkLogin.bind(this), 2000);
        this.checkLogin.bind(this)();
        this.getStat();
        this.fetchOrders();
      },

      methods: {
        saveMain: function () {
          var that = this;
          axios.post('/admin/setting/main', { keyrooms: that.main.keyrooms }).then(function (res) {
            weui.toast('保存成功');
          })
        },
        checkLogin: function () {
          let that = this;

          axios.get("/admin/bot/loginstatus").then(function (res) {
            if (!res.data.onoff) {
              axios.get("/admin/bot/loginqr").then(function (res) {
                if (that.loading) {
                  that.loading.hide();
                }
                that.showQr = true;
                if (res.data.qrcode) {
                  new QRious({
                    element: document.getElementById("qr-canvas"),
                    value: res.data.qrcode,
                  });
                }
                that.isLogin = false;
              });
            } else {
              if (that.isLogin == false) {
                that.isLogin = true;
                that.showLogin = false;
                clearInterval(that.interval);
                that.refresh();
              }
            }
          });
        },
        logout: function () {
          var that = this;
          axios.post("/admin/bot/logout").then(function (res) {
            (that.isLogout = false), (that.interval = setInterval(that.checkLogin.bind(that), 2000));
          });
        },
        saveBot: function (key) {
          var that = this;
          axios.post("/admin/bot", this.bot).then(function (res) {
            if (res.data.status) {
              weui.toast("保存成功");
              that.showCharge = false;
            }
          });
        },
        refresh: function () {
          let that = this;
          axios.get("/admin/bot/info").then(function (res) {
            // console.log(res.data.user);
            if (that.loading) {
              that.loading.hide();
            }
            that.bot = res.data.bot;
          });
          // this.fetchRooms();
          // this.fetchContacts();
        },
        logoutBot: function () {
          let that = this;
          axios.post("/admin/bot/logout").then(function (res) {
            if (res.data.status) {
              that.showLogin = true;
            }
          });
        },

        // fetchRooms: function () {
        // 	var that = this;
        // 	axios.get("/admin/bot/rooms").then(function (res) {
        // 		that.rooms = res.data.rooms;
        // 	});
        // },
        // fetchContacts: function () {
        // 	var that = this;
        // 	axios.get("/admin/bot/contacts").then(function (res) {
        // 		that.contacts = res.data.contacts;
        // 	});
        // },
        sync: function () {
          var that = this;
          this.syncing = true;
          this.syncRooms();
          this.syncContacts();
          setTimeout(function () {
            that.refresh();
            that.syncing = false;
          }, 3000);
        },
        syncRooms: function () {
          axios.get("/admin/bot/rooms/sync").then();
        },
        syncContacts: function () {
          axios.get("/admin/bot/contacts/sync").then();
        },
        getStat: function () {
          let that = this;
          axios.get("/admin/bot/stat").then(function (res) {
            that.stat = res.data.stat;
          });
        },
        reboot: function (hard) {
          if (confirm("确认重启程序， 确认后等待一会，手动刷新即可")) {
            axios.post("/admin/reboot", { hard }).then(function (res) {
              setTimeout(function () {
                alert("重启成功，请手动刷新测试");
              }, 3000);
            });
          }
        },
        fetchOrders: function () {
          var that = this;
          axios.get("/admin/bot/orders").then(function (res) {
            that.orders = res.data.orders;
          });
        },
      },
    });
  </script>